<template>
  <el-dialog v-model="isShowDialog" title="新增用户">
    <UserInfoForm ref="UserRef" disabledUserName />
    <template #footer>
      <div class="addForm">
        <el-button type="primary" @click="addUser()">新增</el-button>
        <el-button @click="isShowDialog = !isShowDialog">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
import UserInfoForm from "@/components/UserInfoForm/index.vue";

defineOptions({
  name: "",
});

const UserRef = ref<InstanceType<typeof UserInfoForm>>();
const emit = defineEmits(["on-close"]);

const isShowDialog = ref(false);
const closeClick = () => {
  isShowDialog.value = !isShowDialog.value;
  UserRef.value?.resetFields();
};

const addUser = async () => {
  const result = await UserRef.value?.addUser();
  if (result) {
    emit("on-close", true);
    closeClick();
  }
};

defineExpose({
  closeClick,
});
</script>

<style lang="scss" scoped>
.addForm {
  margin: 0 20px;
}
</style>
